<template>
    <div class="root">
      <ul>
        <li><h2 class="title">联系我们</h2></li>
        <li class="msg"><span>选择您喜欢的方式与我们的顾客服务中心联系，或通过我们的 FAQ 了解更多信息</span></li>
        <li class="mp">
          <ul class="way">
            <li>
              <div><h2 class="title">致电我们</h2></div>
              <p class="content">每天：10:00 - 19:00</p>
              <div class="btn_way" style="margin-top: 85px"><router-link to="#"><span><i class="el-icon-mobile-phone
"></i> 400 6588 555</span></router-link></div>
            </li>
            <li>
              <div><h2 class="title">EMAIL 我们</h2></div>
              <p class="content">我们的时尚顾问将解答您的问题</p>
              <div class="btn_way" style="margin-top: 85px"><router-link to="#"><span><i class="el-icon-receiving
"></i> 撰写邮件</span></router-link></div>
            </li>
            <li>
              <div><h2 class="title">关注我们</h2></div>
              <p class="content">了解我们的最新动态及产品相关信息</p>
              <div class="btn_way" style="margin-top: 25px;margin-bottom: 8px"><a :href="weBo"><span><i class="el-icon-receiving
"></i> 官方微博</span></a></div>
              <div class="btn_way"><a :href="weChat"><span><i class="el-icon-receiving
"></i> 官方微信</span></a></div>
            </li>
          </ul>
        </li>
        <li class="time mp">
            <div><h2 class="title">路易威登顾客服务中心工作时间</h2></div>
          <ul>
            <li class="content">每天：10:00 - 19:00</li>
          </ul>
        </li>
        <li class="questions mp">
            <div><h2 class="title">常见问题</h2></div>
          <ul>
            <li><router-link to="#">如何进行退换货？</router-link> </li>
            <li><router-link to="#">如何在线购买路易威登的产品？</router-link> </li>
            <li><router-link to="#">如何查找专卖店？</router-link> </li>
            <li><router-link to="#">如何维修路易威登产品？</router-link> </li>
            <li><router-link to="#">邮递配送</router-link> </li>
            <li><router-link to="#">如何开发票？</router-link> </li>
          </ul>
          <div class="btn_way mp" style="width: 372.3px;"><router-link to="/index/help/question"><span>查看全部</span></router-link></div>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "Call",
      data(){
          return{
          //  官方微博
            weBo:'https://www.weibo.com/louisvuitton',
          //  官方微信
            weChat:'https://www.louisvuitton.cn/zhs-cn/la-maison/wechat#'
          }
      }
    }
</script>

<style scoped>
  ul li:nth-of-type(n+3){
    background-color: white;
  }
  .way{
    display: flex;
    justify-content: flex-start;
  }
  .way li:nth-of-type(n+2){
    box-shadow: inset 1px 0 0 0 #eae8e4;
  }
.way li{
  padding: 2rem;
  font-size: 1.0125rem;
  font-weight: 300;
  width: 372.3px;
}
.title{
  margin: 0 0 16px;
}
.content{
  font-size: 1.0125rem;
  font-weight: 300;
}
  .btn_way{
    padding: 1rem 1.5rem;
    font-size: .9rem;
    border: 0.0625rem solid #eae8e4;
    background-color: white;
    font-weight: 400;
    width: 100%;
    cursor: pointer;
    text-align: center;

  }
.time{
  padding: 2rem;
  font-size: 1.0125rem;
  font-weight: 300;
}
  .mp{
    margin-top: 40px;
  }
  .questions {
    padding: 2rem;
    font-size: .7875rem;
    font-weight: 400;
  }
  .questions ul{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    text-decoration-line: underline;
  }
  .questions li{
    width: 341px;
    margin: 24px 0 0;
  }
</style>
